<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css样式思路
			 1.通配选择器：微软雅黑、#f5f5f5 浅灰、外边距
			 2.#product_card 边框、内边距、外边距、阴影【透明、1】、文字居中
			 3.img:边框倒角、内外边距？ 【微调】
			 4.h3 颜色、内外边距？【微调】
			 5.p:字体大小、颜色
			 .p+span：span、内外边距？【微调】、颜色
			 */
			img{
				border: 10px solid #f5f5f5;
				/* margin:1个属性值 顺时针：上  右 下 左 */
				margin: 200px;
				/* margin:2个属性值 顺时针 ：上下 右左 */
				margin: 500px 300px;
				/* 常用：盒子自适应居中------失效 
				   行内块  可以设置宽高 在一行内显示、无法居中
				   margin1使用问题1 自适应居中 必须设置宽高*/
				
				margin: 0 auto;
				/* margin:3个属性值 顺时针 上 右左 下 */
				mar gin: 100px 200px 300px;
				/* margin:3个属性值 顺时针 上 右 下 左*/
				mar gin: 100px 200px 300px 400px;
				padding: 10px 8px 150px ;
				
				
			}
			h3{
				/* 块元素：可以设置高宽、不在一行内显示、无法居中、内置文本
				text-align: center;
				*/
				/* 常用：盒子自适应居中 */
				width: 100%;
				
				text-align: center;
				margin: 100px 200px;
			}
			p{
				/* 块元素：可以设置高宽、不在一行内显示、无法居中、内置文本
				text-align: center;
				*/
				/* 常用：盒子自适应居中 */
				width: 100%;
				
				text-align: center;
				margin: 100px 200px;
			}
			div{
				width: 200px;
				height: 200px;
			
				margin: 0 auto;
				
				
			}
			
			div#produce_card{
				
				
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 50px 50px 50px 50px #878787 outset;
				
			}
			div#h3{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 网页 1.html 结构【原生图分析】 -->
		<div id="produce_card">
			<div id="h3">
			
			<img src="img/小米SU7.jpg"width="230px"height="300px" alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<p>
				<soan></soan>
			</p>
		</div>
	</body>
</html>